<template>
  <div class="countParrent-container">
    <div class="header">家长统计</div>
    <div class="table">
      <div class="table-box" v-if="tableList">
        <div class="row-s">
          <div class="col-s">时间</div>
          <div class="col-s">B级</div>
          <div class="col-s">C级</div>
        </div>
        <div class="row-s">
          <div class="col-s">昨日</div>
          <div class="col-s">{{tableList.L1_yesterdaydata}}</div>
          <div class="col-s">{{tableList.L2_yesterdaydata}}</div>
        </div>
        <div class="row-s">
          <div class="col-s">今日</div>
          <div class="col-s">{{tableList.L1_todaydata}}</div>
          <div class="col-s">{{tableList.L2_todaydata}}</div>
        </div>
        <div class="row-s">
          <div class="col-s">本周</div>
          <div class="col-s">{{tableList.L1_weekdata}}</div>
          <div class="col-s">{{tableList.L2_weekdata}}</div>
        </div>
        <div class="row-s">
          <div class="col-s">本月</div>
          <div class="col-s">{{tableList.L1_monthdata}}</div>
          <div class="col-s">{{tableList.L2_monthdata}}</div>
        </div>
        <div class="row-s">
          <div class="col-s">本年</div>
          <div class="col-s">{{tableList.L1_yeardata}}</div>
          <div class="col-s">{{tableList.L2_yeardata}}</div>
        </div>
        <div class="row-s">
          <div class="col-s">自定义</div>
          <div class="col-s">{{tableList.L1_total_self || 0}}</div>
          <div class="col-s">{{tableList.L2_total_self || 0}}</div>
        </div>
      </div>
      <van-cell title="选择日期区间" :value="date" @click="show = true" is-link arrow-direction="down"></van-cell>
    </div>
    <van-calendar :min-date="minDate" :max-date="maxDate" v-model="show" type="range" @confirm="onConfirm"></van-calendar>
  </div>
</template>
  <script>
import { Cell, Toast, Calendar} from 'vant';
export default {
  components: { [Cell.name]: Cell, [Calendar.name]: Calendar},
  data() {
    return {
      active: 0,
      show: false,
      minDate: new Date(new Date().getFullYear() - 2, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      date: '请选择',
      value: '',
      checked: false,
      loading: false,
      tableList: {},
      startTime: '',
      endTime: '',
      selbytime: ''
    };
  },

  created() {
    this.searchTime();
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${date.getDate() > 9 ? date.getDate() : '0' + date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.selbytime = 'byselfdy';
      console.log(1);
      this.searchTime();
    },
    searchTime() {
      let that = this;
      vant.Toast.loading({ message: '加载中...' });
      $.ajax({
        type: 'get',
        url: "{php echo $this->createMobileUrl('w_work', array('schoolid' => $schoolid,'type'=>'countparent','todo'=>'index','submittype'=>'AJAX'))}",
        data: {
          sttime: this.startTime,
          edtime: this.endTime,
          selbytime: this.selbytime
        },
        dataType: 'json',
        success: function (d) {
          vant.Toast.clear();
          console.log('d', d)
          if (d.status === 1) {
            if (that.selbytime == 'byselfdy') {
              that.tableList.L1_total_self = d.list.L1_total_self;
              that.tableList.L2_total_self = d.list.L2_total_self;
            } else {
              that.tableList = d.list;
            }

          } else {
            vant.Toast(d.msg);
          }
        }
      });
    }
  }
};
  </script>
  
  <style lang="less">
.countParrent-container {
  .header {
    height: 70px;
    line-height: 70px;
    font-size: 0.32rem;
    color: #333;
    text-align: center;
  }
  .table {
    padding: 0.2rem;
  }
  .table-box {
    border-radius: 6px;
    background: #fff;
  }
  .row-s {
    display: flex;
    align-items: center;
  }
  .col-s {
    height: 0.46rem;
    line-height: 0.46rem;
    font-size: 0.3rem;
    text-align: center;
    width: 33.33%;
  }
  .row-s:nth-of-type(even) {
    background: #ccffff;
  }
}
</style>
  